<template>
  <div class="foodDetail-container">
    <el-row
      type="flex"
      justify="center">
      <el-col :span="12">
        <el-row
          type="flex"
          justify="flex-start"
          align="middle">
          <div class="img-bg">
            <img
              :src="totalData.src + '?x-oss-process=style/width-64'"
              :alt="totalData.name">
          </div>
          <div style="margin-left: 16px">
            <h3>{{ totalData.name }}</h3>
            <i class="grey-font">{{ totalData.alis }}</i>
            <el-row
              type="flex"
              justify="flex-start"
              style="margin-top: 16px">
              <el-col>
                <div>
                  <span class="grey-font">饱食</span>
                  <span class="common-font">{{ totalData.attr[0] }}</span>
                  <span class="grey-font">血量</span>
                  <span class="common-font">{{ totalData.attr[1] }}</span>
                  <span class="grey-font">精神</span>
                  <span class="common-font">{{ totalData.attr[0] }}</span>
                  <span class="grey-font">保质期</span>
                  <span class="common-font">{{ totalData.attr[1] }}</span>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-row>
        <hr>
        <h4 v-if="totalData.composite.length !== 0">合成物</h4>
        <el-row
          v-if="totalData.composite.length !== 0"
          type="flex"
          justify="center"
          align="middle">
          <img
            v-for="item in 4"
            :key="item"
            :src="'https://img.fireleaves.cn/Foods/' + totalData.composite[item - 1] + '.png'"
            width="48"
            alt="掌上饥荒"
            style="margin-right: 24px">
        </el-row>
        <h4 v-if="totalData.need.length !== 0">必须材料</h4>
        <el-row
          type="flex"
          justify="center"
          align="middle">
          <span
            v-for="(item,index) in totalData.need"
            :key="index">
            <img
              v-if="index % 2 == 0"
              :src="concatUrl(item)"
              alt="掌上饥荒"
              width="32">
            <span
              v-if="index % 2 != 0"
              class="common-font"
              style="margin-right: 16px">{{ item }}</span>
          </span>
        </el-row>
        <h4 v-if="totalData.fail.length !== 0">不能添加材料</h4>
        <el-row
          type="flex"
          justify="center"
          align="middle">
          <span
            v-for="(item,index) in totalData.fail"
            :key="index">
            <span
              v-if="index % 2 == 0"
              class="common-font">{{ item }}</span>
            <img
              v-if="index % 2 != 0"
              :src="concatUrl(item)"
              alt="掌上饥荒"
              width="32"
              style="margin-right: 16px">
          </span>
        </el-row>
        <h4>属性</h4>
        <el-row
          type="flex"
          justify="center"
          align="bottom">
          <span class="grey-font">优先级</span>
          <span class="common-font">{{ totalData.priority }}</span>
          <span class="grey-font">烹饪</span>
          <span class="common-font">{{ totalData.time }}秒</span>
          <span class="grey-font">温度</span>
          <span class="common-font">{{ totalData.temperature[0] > 0 ? "升温":"降温" }}{{ "持续" + totalData.temperature[1] + "秒" }}</span>
          <span class="grey-font">生成代码</span>
          <span class="common-font">{{ totalData.console }}</span>
        </el-row>
        <h4>介绍</h4>
        <MdStr :content="totalData.desc"/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import MdStr from '~/components/MdStr';

  export default {
    name: "FoodDetail",
    async asyncData({store, $axios, query}) {
      let totalData = await $axios.$get(`https://fireleaves.cn/food/single`, {
        params: {
          src: query.src,
          version: store.state.version
        }
      });
      return {
        totalData
      }
    },
    components: {
      MdStr
    },
    methods: {
      concatUrl(url) {
        if (url == "素" || url == "荤") {
          return "";
        } else {
          return "http://img.fireleaves.cn/Foods/" + url + ".png";
        }
      }
    },
    head() {
      return this.$seo(`饥荒食谱-${this.totalData.name}`, this.totalData.desc.substring(0, 30), this.totalData.name);
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/assets/golbal.scss';

  .foodDetail-container {
    padding: 16px;
    min-height: 100vh;
    width: 100%;

    .img-bg {
      position: relative;
      width: 120px;
      height: 105px;
      background-image: url('https://img.fireleaves.cn/SomeLabel/food_bg.png');

      img {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }

    .grey-font {
      color: $common-font;
      font-size: 12px;
    }

    .common-font {
      margin-left: 6px;
      margin-right: 16px;
      color: $black-font;
      font-size: 16px;
      font-weight: 600;
    }

    hr {
      margin-top: 16px;
      height: 4px;
      background-color: #ededed;
      outline: none;
      border: none;
    }

    h4 {
      margin-top: 32px;
      margin-bottom: 16px;
      padding-left: 12px;
      font-size: 18px;
      font-weight: 600;
      border-left: 3px solid #2d8982;
    }
  }
</style>
